// pages/apiDemo/apiDemo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hidden: true,
    x: 0,
    y: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const ctx = wx.createCanvasContext('myCanvas');
    
    // 线性变化
    //  linear gradient
    const grd = ctx.createLinearGradient(0, 0, 200, 0)
    //  circular gradient
    // const grd = ctx.createCircularGradient(75, 50, 50)
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')

    ctx.setFillStyle(grd);//填充
    // ctx.setFillStyle('red');

    ctx.setStrokeStyle('blue');//边框
    ctx.strokeRect(10, 10, 150, 75)

    ctx.setShadow(10, 50, 50, 'yellow');//阴影

    ctx.fillRect(10,10,150,75);

    // 线条
    ctx.beginPath()
    ctx.setLineCap('square');//线条的结束端点样式 'butt'、'round'、'square'
    ctx.setLineWidth(5);//宽度
    ctx.moveTo(10, 70);//开始
    ctx.lineTo(150, 70);//线到什么时候静止
    ctx.stroke()

    ctx.draw(wx.canvasToTempFilePath({
      x: 100,
      y: 200,
      width: 50,
      height: 50,
      destWidth: 100,
      destHeight: 100,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath)
      }
    }));

    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showLoading({
      title: '正在加载',
      mask: true
    })
    setTimeout(function(){
      wx.hideLoading()
    },2000)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  // 手指放到canvas上面触发的事件
  tcstart:function(e){
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  // 手指在canvas上面移动的事件
  tcmove: function (e) {
    this.setData({ 
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  // 手指离开canvas的事件
  tcend: function (e) {
    this.setData({
      hidden: true 
    })
  },
  // 弹窗显示
  modalFn:function(e){
    wx.showModal({
      title: '2018/5/22',
      content: 'this is a modal',
      success: function (res) {
        if (res.confirm) {
          wx.showToast({
            title: 'yes',
            icon: "success", 
            duration:1000
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
          // 显示消息提示框
          wx.showToast({
            title: "no",
            icon: "loading",//"success", "loading", "none"
            duration: 1000
          })
        }
      }
    })
  },
  // 显示操作菜单
  menuFn:function(e){
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },
  moveTitle:function(){
    wx.setNavigationBarTitle({
      title: '当前页面',
    })
  }
})